<template>
    <div class="Zy-Page">
      <div class="di1">
        <table class="table" v-for="data in datas">
          <tr class="disan">
            <td class="diliu"><label class="label">使用者信息:</label></td>
          </tr>
          <tr class="diwu">
            <td class="diliu">工作编号:</td>
            <td class="diliu">{{data.id}}</td>
          </tr >
          <tr class="diwu">
            <td class="diliu">姓名:</td>
            <td class="diliu">{{data.name}}</td>
          </tr>
          <tr class="diwu">
            <td class="diliu">职位:</td>
            <td class="diliu">{{data.role}}</td>
          </tr>
          <tr class="diwu">
            <td class="diliu">联系电话:</td>
            <td class="diliu">{{data.phone}}</td>
          </tr>
        </table>
      </div>
      <div class="disi">

      </div>
      <div class="di2" v-for="data in datas">
        <label class="label">个人头像:</label>
        <img :src="data.img"/>
      </div>
    </div>
</template>

<script>
  export default {
    name: 'Zy-Page',
    data(){
      return {
        datas:[]
      }
    },
    computed:{
    },
    mounted() {
      this.$http.get('/zhuye').then(resp=>{
        this.datas = resp.data;
      }).catch(err=>console.log(err));
    }
  }
</script>
<style lang="less">
    .Zy-Page {
      background-color: #3ff7ff;width: 100%;
    }
  .di1{
    width: 40%;height:275px;float: left;
  }
  .di2{
      width: 49%;height:275px;float: left;margin-left: 10px;
    }
    .disi{
      width: 1px;border:1px  solid #cccccc;float: left;height: 275px;
    }
  .label{font-size: 20px;padding-left: 0;margin-top: 0;color: #880000;}
  .diwu{margin-top: 40px;font-size: 18px;display: block;}
  .diliu{display:inline-block;margin-right: 30%}
  .disan{margin-top: 0;}
</style>
